<template>
  <div class="sales">
    <el-card>
      <CommonCard title="累计用户数" :value="numberFormat(userToal)">
        <div ref="main" style="width: 100%; height: 100%"></div>

        <template #footer>
          <span class="isDay">
            日同比 <span class="isBorder">{{ userGrowthLastDay }}%</span><span class="decrement"></span>

            月同比<span class="isBorder"> {{ userGrowthLastMonth }}%</span><span class="increment"></span>
          </span>
        </template>
      </CommonCard>
    </el-card>
  </div>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "totalUsers",
  components: {
    CommonCard,
  },
}
</script>
<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, onMounted } from "vue"
import type { EChartsType } from "echarts"
import { useReportData } from "@/stores/reportData" // 引入小菠萝获取数据

import { computed } from "@vue/runtime-core"
import useFormat from "@/hooks/useFormat"
// 对格式化数据的函数进行解构
const { numberFormat, moneyFormat } = useFormat()
// 这个页面完成后,发现第一控制台警告,显示说期望得到一个string,但是是number,这是公共组件插槽中定义props的type类型推断的,先不管
// 第二,发现页面中的数据与预期出入,预期要一个英文类型的数据,就是某位开始,每隔3个数字加一个逗号,我们可以在hook中定义一个函数,来对数据进行处理

// 创建pinia实例
const reportDataStore = useReportData()
const main = ref()
let myChart: EChartsType
// 累计用户数
const userToal = computed(() => reportDataStore.reportData.usersTotal)
const usersLastMonth = computed(() => reportDataStore.reportData.usersLastMonth)
const userGrowthLastDay = computed(() => reportDataStore.reportData.userGrowthLastDay)
const userGrowthLastMonth = computed(() => reportDataStore.reportData.userGrowthLastMonth)

const getOptions = () => {
  return {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      min: 0,
      max: 100,
      show: false,
    },
    yAxis: {
      show: false,
      // 将X轴的数据项给到Y轴，从而让柱条以水平方向和呈现
      data: ["数据"],
    },
    grid: {
      left: 0,
      right: 0,
    },
    series: [
      {
        name: "2011",
        type: "bar",
        data: [34], // 柱状条占比

        barWidth: 10, // 设置柱条的宽度

        showBackground: true, // 显示柱条的背景颜色
        itemStyle: {
          color: "orangered",
        },
        // 设置刻度样式
        label: {
          show: true, // 默认是data中的数据
          formatter: "|",
          color: "orangered",
          //   position: "right",color: 'orangered',
          position: "insideRight",
        },
      },
    ],
  }
}
onMounted(() => {
  var myChart = echarts.init(main.value)
  myChart && myChart.setOption(getOptions())
})
</script>

<style lang="scss" scoped>
.sales {
  .isDay {
    display: flex;
    align-items: center;
  }
  .isBorder {
    margin-left: 5px;
    font-weight: 600;
  }
  .decrement {
    width: 0;
    height: 0;
    margin-right: 15px;
    border-width: 5px;
    border-color: red transparent transparent transparent;
    border-style: solid;
  }
  .increment {
    width: 0;
    height: 0;

    border-width: 5px;
    border-color: transparent transparent green transparent;
    border-style: solid;
  }
}
</style>
